<template>
  <div class="charts">
    <div id="main">
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "charts",
  props: {
    data: Array
  },
  data() {
    return {
      myChart: '',
      answerOptionInformation:[],
      answerOptionNumber:[],
      answerOptionPercentage:[]
    }
  },
  watch: {
    data: {
      handler() {
        console.log('传递的参数', this.data)
/*
        const series = [
          {
            data: [0, 0, 0, 0, 0, 0, 0],
            type: 'bar'
          }
        ]
        this.myChart.setOption({
          series
        })
*/

        for(var i=0;i<this.data.length;i++){
          this.answerOptionInformation.push(this.data[i].order_information);
          this.answerOptionNumber.push(this.data[i].number);
          this.answerOptionPercentage.push(this.data[i].percentage);
        }

        console.log(this.answerOptionNumber)
        console.log(this.answerOptionInformation)
        console.log(this.answerOptionPercentage)

        const xAxis =[
          {
            type: 'category',
            data:this.answerOptionInformation
          }
        ]

        const series = [
          {
            data: this.answerOptionNumber,
            type: 'bar'
          },
          {
            data: this.answerOptionPercentage,
            type: 'bar'
          }
        ]
        this.myChart.setOption({
          xAxis,
          series
        })



        // 修改图表的option并重新加载图表
        // 这里 重新写要修改的数据
        // 比如
        /*
        series: [
        {
          data: newData,
          type: 'bar'
        }
        this.myChart.setOption({
        series
        })
      ]
        * */
      }
    }
  },
  mounted() {
    let chartDom = document.getElementById('main');
    this.myChart = echarts.init(chartDom);
    let option;

    option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed']
        //data: this.answerOptionInformation
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          //data: [120, 200, 150, 80, 70, 110, 130],
          data: this.answerOptionNumber,
          type: 'bar'
        },
        {
          //data: [120, 200, 150, 80, 70, 110, 130],
          data: this.answerOptionPercentage,
          type: 'bar'
        }
      ]
    };
    option && this.myChart.setOption(option);
  }
}
</script>

<style lang="scss">
  .charts {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: calc(50% - 250px);
    top: calc(50% - 250px);
    z-index: 100;
    height: 500px;
    width: 500px;
    background: #ccc;
    #main {
      height: 400px;
      width: 400px;
    }
  }
</style>
